.daterangepicker {
    font-family: $fontFamily;
    border-radius: $borderRadius;
    border: 0;
    box-shadow: 0 0.5rem 1rem rgba(0,  0,  0,  0.15);

    @include themify() {
        background-color: themed($surfaceBg);
    }

    &:after,
    &:before {
       content: none;
    }

    .ranges {
        border-radius: $borderRadius;
        overflow: hidden;

        @include themify() {
            background-color: themed($surfaceBg);
        }

        li {
            &.active {
                background-color: $primaryBlue;
                color: $fontColorDark;
            }

            &:not(.active):hover {
                background-color: rgba($primaryMutedColor, 0.04);
            }
        }
    }

    .drp-buttons {
        @include themify() {
            border-top: themed($border);
        }
    }

    .cancelBtn {
        background-color: $dangerColor;
    }

    &.show-ranges.ltr .drp-calendar.left {
        @include themify() {
            border-left: themed($border);
        }
    }

    .calendar-table {
        @include themify() {
            background-color: themed($surfaceBg);
            border: themed($border);
        }

        .next, .prev {
            span {
                @include themify() {
                    border-color: themed($color);
                }
            }
        }
    }

    td {
        &.off {
        color: $primaryMutedColor;
        background-color: transparent;

            &.in-range,
            &.start-date,
            &.end-date {
                background-color: rgba($primaryBlue, .3);
                @include themify() {
                    color: themed($color);
                }
            }

            &.ends {
                background-color: transparent;
            }
        }

        &.in-range {
            background-color: rgba($primaryBlue, .3);
            @include themify() {
                color: themed($color);
            }
        }

        &.active, &.active:hover {
            background-color: $primaryBlue;
            color: $fontColorDark;
        }
    }

    td.available:not(.active):hover,
    th.available:not(.active):hover {
        background-color: rgba($primaryMutedColor, .3);
    }

    select {
        background: transparent !important;
        color: $primaryBlue !important;
        border-radius: $borderRadius;
        border: $activeBorder !important;
    }
    
    &.show-calendar .ranges {
        margin-top: 0;
    }
}